<template>
	<view>
		<u-popup 
			:show="options.isShow"
			:overlay="options.overlay"
			:mode="options.mode"
			:duration="options.duration"
			:closeable="closeable"
			:closeOnClickOverlay="options.closeOnClickOverlay"
			:zIndex="options.zIndex"
			:safeAreaInsetBottom="options.safeAreaInsetBottom"
			:safeAreaInsetTop="options.safeAreaInsetTop"
			:closeIconPos="options.closeIconPos"
			:round="options.round"
			:zoom="options.zoom"
			:customStyle="customStyle"
			@close="_close" 
			@open="_open">
			<view>
				<slot></slot>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"c-base-popup",
		props: {
			closeable: {
				default: false,
				type: Boolean
			}
		},
		data() {
			return {
				options: {},
				defaultOptions: {
					isShow: false,
					overlay: true,
					mode: "center",
					duration: 300,
					closeOnClickOverlay: true,
					zIndex: 10075,
					safeAreaInsetBottom: true,
					safeAreaInsetTop: false,
					closeIconPos: "top-right",
					round: 0,
					zoom: true,
					customStyle: ""
				}
			}
		},
		created() {
			this.options = JSON.parse(JSON.stringify(this.defaultOptions))
		},
		methods: {
			open(options) {
				if (options) {
					for (let i in this.options) {
						this.options[i] = options[i] || this.options[i]
						if (i == "overlay" || i == "closeOnClickOverlay" || i == "safeAreaInsetBottom" || i == "zoom") {
							this.options[i] = options[i] !== false ? true : false
						}
						if (i == "safeAreaInsetTop") {
							this.options[i] = options[i] || false
						}
					}
				}
				this.options.isShow = true
				this._hideKeyboard()
			},
			hide() {
				this._close()
			},
			_close() {
				this.options.isShow = false
			},
			_open() {
				console.log("open")
			},
			_hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>

<style scoped lang="scss">

</style>
